<template>
  <view class="cart" v-if="cart.length !== 0">
    <!-- 地址组件区域 -->
    <my-address></my-address>
    
    <!-- 商品列表的标题区域 -->
    <view class="cart-title">
      <uni-icons type="shop" :size="20"></uni-icons>
      <text>购物车</text>
    </view>

    <uni-swipe-action >
      <!-- 渲染购物车中的每一件商品 -->
      <block v-for="(goods,index) in cart" :key="index">
        <uni-swipe-action-item :right-options="options" @click="deleteGoods(goods)" @change="change">
          <!-- 使用my-goods组件,传递goods属性 -->
          <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler"
            @number-change="numberChangeHandler"></my-goods>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>
    
    <!-- 自定义结算组件 -->
    <my-settle class="settle" ></my-settle>
  </view>
  
  <!-- 空白购物车区域 -->
  <view class="empty-cart" v-else>
    <image src="../../static/cart_empty@2x.png" ></image>
    <text>空空如也 ~</text>
  </view>
</template>

<script>
  import store from '../../store/store.js'
  export default {
    computed: {
      total() {
        return store.getters.total
      },
      cart() {
        return store.state.cart
      },
    },
    watch:{
      // 监听 total 的变化,每一次变化都会去调用 setBadge 方法
      total(){
        this.setBadge()
      }
    },
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000'
          }
        }]
      };
    },
    methods: {
      // 设置购物车徽标
      setBadge() {
        uni.setTabBarBadge({
          index: 2, //tabbar索引值
          text: this.total + '' //'转为字符串'
        })
      },
      // 点击 radio 按钮的自定义事件 
      radioChangeHandler(e) {
        this.changeGoodsState(e)
      },
      // 点击 number-bar 按钮的自定义事件
      numberChangeHandler(e) {
        this.changeGoodsNumber(e)
      },
      deleteGoods(goods){
        this.removeGoods(goods.goods_id)
      },
      // 引入Store中的 changeGoodsState 方法
      changeGoodsState(goods) {
        store.commit('changeGoodsState', goods)
      },
      // 引入Store中的 changeGoodsNumber 方法
      changeGoodsNumber(goods) {
        store.commit('changeGoodsNumber', goods)
      },
      // 引入Store中的 removeGoods 方法
      removeGoods(goods_id) {
        store.commit('removeGoods', goods_id)
      },
    },
    onShow() {
      // 在显示cart页面的时候显示徽标
      this.setBadge();
    }
  }
</script>

<style lang="scss">
  .settle{
    z-index: 999;
  }
  .cart {
    padding-bottom: 50px;
    .cart-title {
      display: flex;
      align-items: center;
      padding: 7px;
      margin-bottom: 5px;
      border-bottom: 1px solid #ccc;

      text {
        margin-left: 5px;
        font-size: 14px
      }
    }
  }
  .empty-cart{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150px;
    image{
      height: 80px;
      width: 80px;
    }
    text{
      font-size: 14px;
      margin-top: 7px;
    }
  }
</style>